<template>

  <div class="page-user-center">
    <blur class="user-info"
          :blur-amount=40 :url="userInfo.headImgUrl">
      <div class="center">
        <img class="avatar" :src="userInfo.headImgUrl">
          <div class="user-name">
            <span class="ion-ios-person-outline icon"></span> {{userInfo.nickName}}
            <span class="icon"
                  :class="userInfo.sex === 1 ? 'ion-male' : 'ion-female'"></span>
          </div>
          <div class="location"><span class="icon ion-ios-location"></span> {{userInfo.country}} {{userInfo.province}} {{userInfo.city}}</div>
          <span class="icon ion-ios-clock-outline"></span> <time class="time">加入时间 {{userInfo.createTime}}</time>
      </div>
    </blur>
    <tab class="user-tab">
      <tab-item selected @on-item-click="onItemClick('car')">
        <span class="icon ion-ios-cart-outline"></span> 我的购物车
      </tab-item>
      <tab-item @on-item-click="onItemClick('order')">
        <span class="icon ion-ios-list-outline"></span>
        完成订单
      </tab-item>
    </tab>

    <div>
      <router-view></router-view>
    </div>

    <view-box ref="shoppingCar" style="height: 100%;">
    </view-box>
  </div>

</template>

<script>
  import { Sticky, Blur, Tab, TabItem, ViewBox } from 'vux'
  import service from '../models/services'
  import moment from 'moment'

  export default {
    data () {
      return {
        userInfo: {
          headImgUrl: ''
        }
      }
    },
    components: {
      Blur,
      Sticky,
      Tab,
      TabItem,
      ViewBox
    },
    methods: {
      onItemClick (flag) {
        switch (flag) {
          case 'car':
            this.$router.push({
              name: 'shoppingCar'
            })
            break
          case 'order':
            this.$router.push({
              name: 'orderList'
            })
            break
        }
      }
    },
    mounted () {
      service.user.get()
      .then((res) => {
        if (res.data.code === 0) {
          this.userInfo = res.data.result
          this.userInfo.createTime = moment(this.userInfo.createTime * 1000).format('YYYY-MM-DD')
        }
      })
    }
  }
</script>

<style lang="scss">
  .user-info {
    /*background-color: #33384a;*/
  }
  .page-user-center {
    .center {
      text-align: center;
      padding-top: 15px;
      color: #FFF;
      font-size: 12px;
      line-height: 20px;

      .user-name {
        margin: 10px 0;
        font-size: 25px;
        line-height: 1;
        font-weight: bold;
      }
      .time,
      .location {
        color: #EAEAEA;
      }
    }
    .avatar {
      display: block;
      width: 80px;
      margin: 0 auto;
      border-radius: 50%;
      border: 2px solid #fff;
     }

    .user-tab {
      .icon {
        font-size: 120%;
      }
    }
  }
</style>
